<template>
        <div class="select_class">
            <header >
                <a @click="finsish(false)" class="back"></a>
                <span>{{studentType.header}}</span>
                <a class="add" v-if="studentType.type == 1" @click="finsish(true)" >完成</a>
                <a class="add" v-if="studentType.type == 2 || studentType.type == 3" @click="showHistory()" >历史点评</a>
                <a class="add" v-if="!studentType.type" @click="showDetail()" >添加</a>
            </header>
            <mt-search style="height:1.2rem;"
            v-model="searchValue"
            cancel-text="取消"
            placeholder="搜索">
            </mt-search>
            <mt-index-list>
                <mt-index-section class="section" v-for="site in siteData" :key=site :index="site">
                    <div class="main" v-for="(item,index) in showData" v-if="item.sortName==site">
                        
                        <div class="flex">
                            <div class="checkbox_wrap" v-if="studentType.type == 1" >
                                <checkbox v-model="item.checked"></checkbox>
                            </div>
                            <div class="head" @click="showDetail(index)">
                                <img  :src="$api.formatterImg(item.studentPhoto)" />
                            </div>
                            <div class="classroom" style="width:4.5rem;height:100%;" @click="showDetail(index)">
                                <div class="className">{{item.studentName}}</div>
                            </div>
                        </div>     
                        <div @click="$api.tell(item.phone)" v-if="!studentType.type" class="tell_phone"></div>
                        <div class="right" v-if="studentType.type == 2 || studentType.type == 3">
                            <mt-button type="primary" v-if="!item.taskCommentId" @click="dianping(index)" size="small">点评</mt-button>
                            <mt-button type="primary" v-if="item.taskCommentId" disabled size="small">已点评</mt-button>
                        </div>
                    </div>
                </mt-index-section>
            </mt-index-list>
        </div>
        
    </template>

<script>
    import checkbox from '../components/checkbox'
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                studentType: {
                    header: '学生管理',
                },
                useInfo: '',
                searchValue: '',
                pageNum: 1,
                pageSize: 10000,
                serachData: [],
                showData: [],
            }
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
            }
        },
        watch: {
            searchValue(val) {
                this.showData = this.serachData.filter((element, index, self) => {
                    let needShow = false;
                    element.EnglishName.map(x => {
                        if (x.indexOf(val.toUpperCase()) != -1) { //遍历缩略首字母
                            needShow = true;
                        }
                    })
                    return element.studentName.indexOf(val) != -1 || needShow //如果是全拼的也匹配成功
                })
            },
        },
        methods: {
            showDetail(index) {
                if (index || index == 0) {
                    var studentId = this.showData[index].studentId;
                    console.log(JSON.parse(JSON.stringify(this.showData)));
                    console.log(studentId);
                    sessionStorage.setItem("studentId", studentId);
                } else {
                    sessionStorage.removeItem("studentId");
                }
                this.$api.removeCookie('studentDetail');
                this.$router.push({
                    path: 'studentDetail'
                })
            },
            dianping(index) {
                var studentDetail = this.showData[index];
                sessionStorage.removeItem('dianpingDetail');
                sessionStorage.setItem("studentDetail", JSON.stringify(studentDetail));
                this.$router.push({
                    path: 'dianping'
                })
            },
            getStudentType() { //获取类型,用于判断要展示哪部分学生,以及标题
                let studentType = JSON.parse(sessionStorage.getItem('studentType'));
                if (studentType) {
                    this.studentType = studentType;
                    // sessionStorage.removeItem('studentType');
                }
            },
            finsish(done) { //完成
                console.log(done);
                if (!done) { //如果不是完成
                    // sessionStorage.removeItem('studentType');
                    sessionStorage.removeItem('selectStudentList');
                    this.$api.goBack();
                    return;
                }
                var selectStudentList = this.showData.filter((element, index, self) => {
                    if (element.checked) {
                        return element;
                    }
                });
                if (selectStudentList.length == 0) {
                    MessageBox('提示', '请选择学生');
                    return;
                }
                sessionStorage.setItem('selectStudentList', JSON.stringify(selectStudentList));
                sessionStorage.removeItem('studentType');
                this.$api.goBack();
            },
            showHistory() { //历史点评
                switch (this.studentType.type) {
                    case 2: //作业点评
                        this.$router.push({
                            path: 'g25'
                        })
                        break;
                    case 3: //试卷点评
                        this.$router.push({
                            path: 'g26'
                        })
                        break;
                }
            },
            getDetail() {
                var url = '/student/selectPageWithParam';
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    isFlag: 1,
                    stuStatus: 1,
                    classId: sessionStorage.getItem('classId'),
                    schoolId: this.useInfo.schoolId,
                }
                if (this.studentType.type == 2 || this.studentType.type == 3) { //作业或者试卷点评
                    url = '/taskComment/selectStudentPage';
                    params.stuStatus = 4;
                }
                if (this.studentType.type == 1) { //未入班学生
                    url = '/student/selectPageNotInClass'
                    params.stuStatus = 2;
                }

                this.$api.post(url, params, (data) => {
                    if (this.studentType.type == 2 || this.studentType.type == 3) { //作业或者试卷点评
                        this.serachData = this.showData = data.info.map(x => {
                            x.EnglishName = this.$getCase.query(x.studentName);
                            return x
                        })
                    } else {
                        this.serachData = this.showData = data.info.list.map(x => {
                            x.EnglishName = this.$getCase.query(x.studentName);
                            return x
                        })
                    }
                    var selectStudentList = JSON.parse(sessionStorage.getItem('selectStudentList'));
                    if (selectStudentList) {
                        this.showData = this.showData.map(element => {
                            selectStudentList.forEach(item => {
                                if (element.studentId == item.studentId) {
                                    element = item;
                                }
                            });
                            return element;
                        });
                    }

                })
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
        },
        created() {
            this.getStudentType();
            this.getUseInfo();
            this.getDetail();

        },
        components: {
            checkbox,
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>